<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>当当网注册页面</title>
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/register.js"></script>
    <script>
    	$(document).ready(function() {
    		
    		$(".register_input").focus(function(){
   			 	$(this).addClass("register_input_Blur").removeClass("register_input_Focus");
   			 	 $("#nickName_prompt").addClass("register_prompt").removeClass("register_prompt_ok");
				$("#nickName_prompt").html("昵称由大小写英文字母、数字组成，长度为4-20个字符");
 				}).blur(function(){
   				 $(this).addClass(".register_input_Focus").removeClass("register_input_Blur");
   				 $("#email").blur(checkEmail());
   				 $("#nickName").blur(checkname());
   				 $("#pwd").blur(checkPwd());
   				 $("#repwd").blur(checkRepwd());
   			
				//登录
  			
  			});
  	    
  			//地区下拉列表实现级联效果
		var cityList=new Array();
	    cityList['广西省']=[ "南宁市", "柳州市","桂林市","梧州市", "北海市", "防城港市","钦州市", "贵港市","玉林市", "百色市","贺州市", "河池市","来宾市","崇左市", "南宁市","柳州市", "其他"];
	    cityList['广东省']=[ "广州市","韶关市","深圳市","珠海市","汕头市","佛山市","江门市","湛江市","茂名市","肇庆市","惠州市", "梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市", "云浮市"];
	    cityList['安徽省']=["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市", "阜阳市","宿州市", "滁州市", "六安市","宣城市", "池州市", "亳州市","其他"];
		cityList['北京']=["北京"];
		cityList['天津']=["天津"];
		cityList['河北省']=["石家庄市","唐山市","秦皇岛市","邯郸市","邢台市","保定市","张家口市","承德市","沧州市", "廊坊市","衡水市"];
		cityList['山西省']=["太原市","大同市","阳泉市","长治市", "晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"];
		cityList['内蒙古自治区']=["呼和浩特市","包头市","乌海市","赤峰市","通辽市", "鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟", "阿拉善盟"];
		cityList['辽宁省']=[ "沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市", "葫芦岛市"];
		cityList['吉林省']=["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边朝鲜族自治州"];
		cityList['黑龙江省']=["哈尔滨市","齐齐哈尔市","鸡西市","鹤岗市","双鸭山市","大庆市","伊春市","佳木斯市","七台河市","牡丹江市","黑河市","绥化市","大兴安岭地区"];
		cityList['上海省']=["上海市"];
		cityList['江苏省']=[ "南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"];
		cityList['浙江省']=["杭州市","宁波市","温州市","嘉兴市","湖州市","绍兴市","金华市","衢州市","舟山市","台州市","丽水市"];
		cityList['安徽省']=[ "合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"];
		cityList['福建省']=[ "福州市","厦门市","莆田市","三明市","泉州市","漳州市","南平市","龙岩市","宁德市"];
		cityList['江西省']=[ "南昌市","景德镇市","萍乡市","九江市","新余市","鹰潭市","赣州市","吉安市","宜春市","抚州市","上饶市"];
		cityList['澳门']=[ "花地玛堂区","圣安多尼堂区","大堂区","望德堂区","风顺堂区","氹仔","路环"];
		cityList['香港']=[ "中西区","东区","九龙城区","观塘区","南区","深水埗区","黄大仙区","湾仔区","油尖旺区","离岛区","葵青区", "北区","西贡区","沙田区","屯门区","大埔区","荃湾区","元朗区"];
		cityList['台湾']=["台北市","高雄市","基隆市","台中市","台南市","新竹市","嘉义市","台北县","宜兰县","桃园县", "新竹县","苗栗县","台中县","彰化县","南投县","云林县","嘉义县","台南县","高雄县","屏东县","澎湖县" ,"台东县","花莲县"];
		cityList['新疆自治区']=["乌鲁木齐市","克拉玛依市","吐鲁番地区","哈密地区","昌吉回族自治州","博尔塔拉蒙古自治州","巴音郭楞蒙古自治州","阿克苏地区","克孜勒苏柯尔克孜自治州","喀什地区","和田地区", "伊犁哈萨克自治州", "塔城地区","阿勒泰地区"];
		cityList['宁夏自治区']=["银川市","石嘴山市","吴忠市","固原市","中卫市"];
		cityList['青海省']=["西宁市","海东地区","海北藏族自治州","黄南藏族自治州", "海南藏族自治州","果洛藏族自治州","玉树藏族自治州", "海西蒙古族藏族自治州"];
		cityList['甘肃省']=["兰州市", "嘉峪关市","金昌市", "白银市","天水市", "武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市","临夏回族自治州","甘南藏族自治州"];
		cityList['陕西省']=[ "西安市","铜川市","宝鸡市", "咸阳市", "渭南市","延安市","汉中市","榆林市","安康市","商洛市"];
		cityList['西藏自治区']=["上海市"];
		
	    $("#province").append(function(){  
	        var content="";
	        for(var item in cityList){//foreach循环，直接取数组对象
	            content+="<option value="+item+">"+item+"</option>";//拼接内容
	        }
	        return $(content);
	    });
	    //切换省/城市
	    $("#province").change(function(){
	        var value=$(this).val();
	        var content="";
	        if(value=="请选择省/城市"){
	            content="<option>请选择城市/地区</option>";
	            $("#city").html(content);
	            return;
	        }
	        var citys=cityList[value];
	        $.each(citys,function(index,name){//index代表城市下标，name代表城市名
	            content+="<option value="+name+">"+name+"</option>";
	        });     
	        $("#city").html(content);
	    });
		
		$("#registerBtn").click(function() {
  				var flag=true;
			    if(!checkEmail()) flag=false;
			     if(!checkEmail()) flag=false;
   				 if(!checkname())  flag=false;
   				 if(!checkPwd())  flag=false;
   				 if(!checkRepwd())  flag=false;
  				if(flag==true)
  				{
  					window.open("index.html","js");
  				}
  				else{
  					alert("请正确填写信息");
  					return false;
  				}
  			});
    	});
    	//验证邮箱
    	function checkEmail(){
    		var email=$("#email").val().trim();
			var regemail=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //正则表达式
			if(regemail.test(email)==false){
				$("#email_prompt").addClass("register_prompt_error").removeClass("register_prompt_ok");
				$("#email_prompt").html("请输入您常用的电子邮箱");
				return false;
			}
			else{
				$("#email_prompt").addClass("register_prompt_ok").removeClass("register_prompt_error");;
				$("#email_prompt").html(" ");
				return true;
			}
    	}
		//验证昵称
		function checkname(){
    		var nick=$("#nickName").val().trim();
			var regnick=/^([\u4e000-\u9fa5]|\w|[@!#$%*])+$/;
			var len=nick.replace("/[\u4e000-\u9fa5]/g","xx").length;//计算字符串长度，一个汉字表示2个字符
			if(regnick.test(nick)==false){
				$("#nickName_prompt").addClass("register_prompt_error").removeClass("register_prompt_ok");
				$("#nickName_prompt").html("昵称由大小写英文字母、数字组成，长度为4-20个字符");
			}else if(len<4||len>20){
				$("#nickName_prompt").addClass("register_prompt_error").removeClass("register_prompt_ok");
				$("#nickName_prompt").html("昵称长度为4-20个字符");
			}
			else{
				$("#nickName_prompt").addClass("register_prompt_ok").removeClass("register_prompt_error");
				$("#nickName_prompt").html(" ");
			}
    	}
		//验证密码
		function checkPwd(){
			var pwd=$("#pwd").val().trim();
			var regpwd=/^[0-9a-zA-Z]{4,18}$/;
			if(regpwd.test(pwd)==false){
				$("#pwd_prompt").addClass("register_prompt_error").removeClass("register_prompt_ok");
				$("#pwd_prompt").html("密码由英文字母和数字组成的4-18位字符");
				return false;
			}else{
				$("#pwd_promptd").addClass("register_prompt_ok").removeClass("register_prompt_error");
				$("#pwd_prompt").html(" ");
				return true;
			}
		}
		//确认密码
		function checkRepwd(){
			var pwd=$("#pwd").val().trim();
			var repwd=$("#repwd").val().trim();
			if(pwd==""){
				$("#repwd_prompt").html("");
				return false;
			}
			if(repwd!=pwd){
				$("#repwd_prompt").addClass("register_prompt_error").removeClass("register_prompt_ok");
				$("#repwd_prompt").html("两次密码输入不一致");
				return false;
			}else{
				$("#repwd_prompt").addClass("register_prompt_ok").removeClass("register_prompt_error");
				$("#repwd_prompt").html(" ");
				return true;
			}
		}
		

    </script>
</head>

<body>
<div id="header">
    <div id="register_header">
        <div class="register_header_left"><img src="images/logo.gif" alt="logo"/></div>
        <div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a>  | <a href="shopping.html" class="blue">购物车</a> |  <a href="login.html" class="blue">登录</a></div>
    </div>
</div>
<div id="main">
    <div class="register_content">
        <div class="register_top_bg"></div>
        <div class="register_mid_bg">
            <ul>
                <li class="register_mid_left">填写注册信息</li>
                <li class="register_mid_mid">2. 邮箱验证</li>
                <li class="register_mid_right">3. 完成注册</li>
            </ul>
        </div>
        <div class="register_top_bg_mid">
            <div class="register_top_bg_two_left"></div>
            <div class="register_top_bg_two_right"></div>
            <div class="register_title_bg"><img src="images/register_pic_02.gif" alt="欢迎注册"/><br/>您所提供的资料不会做其他用途，敬请安心填写。</div>
        </div>
        <div class="register_dotted_bg"></div>
        <div class="register_message">
            <form action="" method="post" id="myform">
                <dl class="register_row">
                    <dt>Email地址：</dt>
                    <dd><input id="email" type="text" class="register_input"/></dd>
                    <dd><div id="email_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>设置昵称：</dt>
                    <dd><input id="nickName" type="text" class="register_input"/></dd>
                    <dd><div id="nickName_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>设定密码：</dt>
                    <dd><input id="pwd" type="password" class="register_input"/></dd>
                    <dd><div id="pwd_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>再输入一次密码：</dt>
                    <dd><input id="repwd" type="password" class="register_input"/></dd>
                    <dd><div id="repwd_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>性别：</dt>
                    <dd><input name="sex" id="man" type="radio" value="男" checked="checked"/> <label for="man">男</label></dd>
                    <dd> <input name="sex" id="woman" type="radio" value="女"/> <label for="woman">女</label></dd>
                </dl>
                <dl class="register_row">
                    <dt>所在地区：</dt>
                    <dd>
                        <select id="province" style="width:120px;">
                            <option>请选择省/城市</option>
                        </select>
                    </dd>
                    <dd>
                        <select id="city"  style="width:130px;">
                            <option>请选择城市/地区</option>
                        </select>
                    </dd>
                </dl>
                <div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></div>
            </form>
        </div>
    </div>
</div>
<!--网站版权部分开始-->
<div id="footer">
    <iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
